<template>
	<view class="userLogin">
		<view class="login_container">
			<view class="inputItem">
				<view class="inputItem_label"><text>手机号</text></view>
				<view class="inputItem_input">
					<tui-input :labelWidth="82" radius="68" labelSize="32" labelColor="#FFFFFF" color="#FFFFFF" size="32"
						:backgroundColor="'rgba(255,255,255,0.5);'" label="+86" placeholder="请输入手机号"
						v-model="form.phonenumber"></tui-input>
				</view>
			</view>
			<view class="inputItem bottom" v-if="isLoginType">
				<view class="inputItem_label"><text>密码</text></view>
				<view class="inputItem_input">
					<tui-input password radius="68" color="#FFFFFF" size="32" :backgroundColor="'rgba(255,255,255,0.5);'"
						placeholder="请输入密码（8位字母+数字）" clearable v-model="password"></tui-input>
				</view>
			</view>
			<view class="inputItem bottom" v-else>
				<view class="inputItem_label"><text>验证码</text></view>
				<view class="inputItem_input">
					<tui-input :labelWidth="82" radius="68" color="#FFFFFF" size="32" :backgroundColor="'rgba(255,255,255,0.5);'"
						placeholder="请输入验证码" v-model="form.code">
						<template v-slot:right>
							<view class="sendCode" @tap="handleGetCode"><text>{{ smsText }}</text></view>
						</template>
					</tui-input>
				</view>
			</view>
			<view class="switchover"> <text @tap="swtichLogin">{{typeText}}</text></view>
			<view class="desc">
				<view @tap="checked = !checked">
					<tutor-checkbox :checked="checked"></tutor-checkbox>
				</view>
				<view class="agreement">我已阅读并同意<text class="a" @tap="userAgreement">《用户服务协议》</text>和<text class="a"
						@tap="privacypolicy">《隐私政策》</text></view>
			</view>
			<tui-form-button @click="tapLogin" margin="52rpx 0 0 0" radius="58rpx" size="32" color="#fff" width="602rpx"
				height="108rpx" background="#2FD7D3">登录</tui-form-button>
			<!-- #ifdef MP-WEIXIN -->
			<view style="display: flex;justify-content: center;">
				<tui-form-button plain @click="tapAutoLogin" margin="52rpx 0 0 0" radius="58rpx" size="32" color="#2FD7D3"
					width="602rpx" height="88rpx" background="#2FD7D3">微信快捷登录</tui-form-button>
			</view>
			<!-- #endif -->
			<view class="footer">
				<view @tap="tapShopMarch">商家入驻</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login,
		getCode,
		loginPas,
		loginAutoMerchant
	} from "@/http/api/user/user.js"
	import Cache from "@/utils/cache";
	export default {
		data() {
			return {
				checked: false,
				smsCode: 60, //发送秒
				smsText: '发送验证码',
				timmer: null,
				isLoginType: false, // 默认验证码登录
				userInfo: {},
				form: {
					phonenumber: '', //手机号 
					code: '' //验证码
				},
				password: '', //密码
			}
		},
		onLoad() {
			let token = Cache.get('access_token');
			if (token) {
				uni.reLaunch({
					url: '/pages/merchantHome'
				})
			}
		},
		computed: {
			typeText() {
				return this.isLoginType ? '验证码登录' : '密码登录'
			}
		},
		methods: {
			//商家操作   商家入驻
			tapShopMarch() {
				uni.navigateTo({
					url: '/pages/merchantEnter/merchantEnter'
				})
			},
			//用户协议
			userAgreement() {
				console.log(123)
				// uni.navigateTo({
				// 	url:'/pages/richText/richText?type='+1
				// })

				uni.navigateTo({
					url: '/pages/richText/richText?type=1'
				})
			},
			//隐私协议
			privacypolicy() {
				uni.navigateTo({
					url: '/pages/richText/richText?type=' + 2
				})
			},
			//获取微信登录code
			wxlogin() {
				let that = this
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.error('loginRes:', loginRes);
						that.userInfo = loginRes
					},
					fail: function(err) {
						console.error('登录失败:', err);
					}
				});
			},
			//获取验证码
			handleGetCode() {

				let self = this;
				if (self.isCountDown) return false;
				if (!self.checked) {
					self.$utils.toast('请同意用户协议和隐私协议');
					return false;
				}
				if (!self.form.phonenumber) {
					self.$utils.toast('请输入手机号');
					return false;
				} else if (!self.$regexp.phone.test(self.form.phonenumber)) {
					self.$utils.toast('请输入正确的手机号');
					return false;
				}
				getCode({
					phonenumber: self.form.phonenumber
				}).then(res => {
					if (res.code == 200) {
						self.countDown();
					} else {
						self.$utils.toast(res.message);
					}
				}).catch(err => {
					console.log(err)
				});
			},
			//切换登陆方式
			swtichLogin() {
				this.isLoginType = !this.isLoginType
			},
			//启动倒计时
			countDown() {
				let self = this;
				self.isCountDown = true;
				self.timmer = setInterval(function() {
					self.smsCode--;
					if (self.smsCode <= 0) {
						self.isCountDown = false;
						self.smsCode = 60;
						clearInterval(self.timmer);
						self.smsText = '重新获取验证码';
						return false;
					}
					self.smsText = self.smsCode + '秒后重新获取';
				}, 1000);
			},
			async tapAutoLogin() {
				let that = this
				uni.showLoading({
					title: '登录中'
				});
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.userInfo = loginRes
						loginAutoMerchant({
								wxCode: loginRes.code
							}).then(res => {
								if (res.code === 200) {
									Cache.set('access_token', res.data.access_token);
									that.$store.dispatch('getCategorys');
									uni.reLaunch({
										url: '/pages/merchantHome'
									})
								}
							})
							.finally(() => {
								uni.hideLoading();
							})
					},
					fail: function(err) {
						uni.hideLoading();
						that.$utils.toast('快捷登录失败');
						console.error('登录失败:', err);
					}
				});
			},
			async tapLogin() {
				let that = this
				if (!that.checked) {
					that.$utils.toast('请同意用户协议和隐私协议');
					return false;
				}
				if (!that.form.code && !that.isLoginType) {
					that.$utils.toast('请输入验证码');
					return false;
				}
				if (that.isLoginType && !that.password) {
					that.$utils.toast('请输入密码');
					return false;
				}
				// 判断平台
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.isLoginType ?
							loginPas({
								username: that.form.phonenumber,
								password: that.password,
								wxCode: loginRes.code
							}).then(res => {
								if (res.code == 200) {
									Cache.set('access_token', res.data.access_token);
									that.$store.dispatch('getCategorys');
									uni.reLaunch({
										url: '/pages/merchantHome'
									})
								} else {
									that.$utils.toast(res.msg)
								}
							}) :
							login({
								phonenumber: that.form.phonenumber,
								smsCode: that.form.code,
								wxCode: loginRes.code,
								distributionCode: ""
							}).then(res => {
								if (res.code == 200) {
									Cache.set('access_token', res.data.access_token);
									that.$store.dispatch('getCategorys');
									uni.reLaunch({
										url: '/pages/merchantHome'
									})
								} else {
									that.$utils.toast(res.msg)
								}
							})

					},
					fail: function(err) {
						that.$utils.toast('登录失败');
						console.error('登录失败:', err);
					}
				});

				// #endif
				// #ifndef MP-WEIXIN
				// 安卓平台使用手机号验证码登录
				that.isLoginType ?
					loginPas({
						username: that.form.phonenumber,
						password: that.password,
					}).then(res => {
						if (res.code == 200) {
							Cache.set('access_token', res.data.access_token);
							that.$store.dispatch('getCategorys');
							uni.reLaunch({
								url: '/pages/merchantHome'
							})
						} else {
							that.$utils.toast(res.msg)
						}
					}) :
					login({
						phonenumber: that.form.phonenumber,
						smsCode: that.form.code,
						distributionCode: ""
					}).then(res => {
						if (res.code == 200) {
							Cache.set('access_token', res.data.access_token);
							that.$store.dispatch('getCategorys');
							uni.reLaunch({
								url: '/pages/merchantHome'
							})
						} else {
							that.$utils.toast(res.msg)
						}
					}).catch(err => {
						console.log(err)
					})
				// #endif

			}
		}

	}
</script>

<style lang="scss" scoped>
	.footer {
		display: flex;
		justify-content: center;
		margin-top: 200rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.userLogin {
		width: 100vw;
		height: 100vh;
		background-image: $userLogin-bg-base64;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;

		.login_container {
			height: auto;
			width: 600rpx;

			.switchover {
				font-size: 28rpx;
				color: #FFFFFF;
				font-weight: bold;
				line-height: 36rpx;
				text-align: right;
				margin: 20rpx 20rpx 0 0;
			}

			.inputItem {
				margin-bottom: 66rpx;

				.inputItem_label {
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 42rpx;
				}

				.inputItem_input {
					margin-top: 24rpx;

					::v-deep .input-placeholder {
						color: #fff !important;
					}
				}

				.sendCode {
					font-weight: 500;
					font-size: 32rpx;
					color: #FFE600;
					line-height: 38rpx;
					text-align: right;
				}
			}

			.bottom {
				margin-bottom: auto;
			}

			.desc {
				display: flex;
				align-items: center;
				margin-top: 94rpx;

				.agreement {
					margin-left: 10rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 28rpx;

					.a {
						color: #2FD7D3;
					}
				}
			}
		}
	}
</style>